<template>
  <el-form ref="invitation" :model="invitation" :rules="rules2" class="post-form">
    <h3>请输入标题</h3>
    <el-form-item prop="title">
      <el-input v-model="invitation.title" prop="title" placeholder="请输入标题"></el-input>
    </el-form-item>
    <h3>请输入内容</h3>
    <el-form-item prop="content">
      <el-input v-model="invitation.content" prop="content" type="hidden" style="display: none;"
        :readonly="true"></el-input>
      <mavon-editor :autofocus="false" ref="md" v-model="invitation.content" @change="getMdHtml" :toolbars="toolbars" />
    </el-form-item>
    <el-form-item>
      <el-button @click="addInvitation">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import invi from '@/api/invitation'
export default {
  data() {
    return {
      role: this.$store.getters.roles,
      invitation: {
        title: '',
        content: '',
        picture: '',
        state: 0
      },
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      },
      mdContent: "",
      htmlContent: "",
      BASE_API1: 'http://localhost:9000',
      rules2: {
        title: [
          { required: true, message: '请输入公告标题', trigger: 'change' },
          { min: 3, message: '公告标题至少需要3个字符', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入公告内容', trigger: 'change' },
          { min: 3, message: '公内容至少需要3个字符', trigger: 'change' }
        ]
      },
    }
  },
  methods: {
    getMdHtml(mdContent, htmlContent) {//参数1：md语法内容，参数2：html语法内容
      this.htmlContent = htmlContent
    },
    addInvitation() {
      this.$refs.invitation.validate((valid) => {
        if (valid) {
          this.invitation.content = this.htmlContent
          invi.add(this.invitation)
            .then(response => {
              this.invitation.title = ''
              this.invitation.content = ''
              this.htmlContent = ''
              this.$router.push({ path: '/post/approve' })
            })
        }
      })
    }
  }
}
</script>
<style lang="scss">
.post-form {
  padding-left: 10%;
  padding-right: 10%;
}
</style>
